@charset "utf-8";
@import "_reset.scss";
@function r($px){
	@return $px / 64px *1rem;
}
.wrap{
	width:r(640px);
	height:r(1228px);
	background-color:#f3f4f6;
	.header{
		position:fixed;
		top:0;
		width:100%;
		height:r(87px);
		background-color:#f7f7f7;
		font-size:r(28px);
		.header_left{
			width:r(22px);
			height:r(37px);
			float:left;
			margin-left:r(29px);
			margin-top:r(26px);
			img{
				height:100%;
			}
		}
		.header_choose{
			display:inline-block;
			text-align:center;
			width:r(400px);
			height:r(60px);
			border:1px solid #d62d31;
			margin:{
				left:r(69px);
				top:r(14px);
			}
			border-radius:5px;
			font-size:16px;
			line-height:r(60px);
			.choose_left{
				width:r(198px);
				height:100%;
				background-color:#d62d31;
				float:left;
				a{
					color:#fff;
					line-height:r(40px);
				}
				
			}
			.choose_right{
				width:r(198px);
				height:100%;
				float:right;
				a{
					color:#d62d31;
					line-height:r(40px);
				}
				
			}
		}
		.header_right{
			width:r(40px);
			height:r(40px);
			float:right;
			margin:{
				top:r(27px);
				right:r(26px);
			}
			img{
				height:100%;
			}
		}
	}
	.search_wrap{
		margin-top:r(87px);
		width:100%;
		height:r(87px);
		border:1px solid #e3e3e3;
		background-color:#fff;
		.search{
			width:r(600px);
			height:r(60px);
			margin:r(13px) auto;
			border:1px solid #e3e3e3;
			border-radius:5px;
			.search_left{
				float:left;
				width:r(30px);
				height:r(30px);
				margin:{
					left:r(17px);
					top:r(14px);
				}
				img{
					height:100%;
					display:block;
				}
			}
			.search_input{
				width:r(484px);
				height:100%;
				vertical-align: top;
				border: 0;
				padding-left:5px;
			}
			.search_right{
				width:r(28px);
				height:r(28px);
				float:right;
				margin:{
					top:r(15px);
					right:r(16px);
				}
				img{
					height:100%;
					display:block;
				}
			}
		}
	}
	.content{
		width:100%;
		.item{
			width:100%;
			height:r(306px);
			background-color:#fff;
			border:1px solid #e3e3e3;
			margin-bottom:r(20px);
			.goods_header{
				height:r(130px);
				width:100%;
				border-bottom:1px solid #e3e3e3;
				>img{
					width:r(90px);
					height:r(90px);
					float:left;
					margin:{
						top:r(20px);
						left:r(20px);
					}
				}
				.goods_details{
					display:inline-block;
					margin-left:r(28px);
					h4{
						width:r(280px);
						overflow:hidden;
						font-size:r(26px);
						color:#333333;
						padding:{
							top:r(28px);
							bottom:r(13px)
						}
					}
					.details_icon{
						font-size:0;
						img{
							width:r(45px);
							height:r(45px);
							margin-right:r(20px);
						}
					}
				}
				.goods_btn{
					width:r(135px);
					height:r(50px);
					border:1px solid #666666;
					border-radius:3px;
					font-size:14px;
					display:block;
					text-align:center;
					line-height:r(50px);
					color:#666666;
					float:right;
					margin:{
						top:r(40px);
						right:r(22px);
					}
				}
				&:after{
					content:"";
					display:block;
					clear:both;
				}
			}
			.goods_pic{
				display:flex;
				justify-content:space-around;
				overflow:hidden;
				.pic_wrap{
					margin-top:r(20px);
					border:1px solid #e3e3e3;
					img{
						width:r(135px);
						height:r(135px);
						display:block;
					}
				}
				
			}
		}

	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		.mask_content{
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #f8f8f8;
			transform: translate(-50%,-50%);
			width:r(540px);
			height:r(540px);
			border-radius:20px;
			h4{
				font-size:r(35px);
				color:#333333;
				text-align:center;
				margin:{
					top:r(42px);
					bottom:r(53px);
				}
			}
			.input_apply{
				width:r(490px);
				height:r(60px);
				margin:0 auto;
				border:1px solid #e3e3e3;
				border-radius:5px;
				background:#fff;
				margin:{
					bottom:r(27px);
				}
				span{
					display:inline-block;
					width:r(110px);
					height:100%;
					font-size:r(26px);
					color:#333333;
					vertical-align:top;
					text-align:center;
					line-height:r(60px);
				}
				input{
					border:0;
					height:100%;
					vertical-align:top;
				}
			}
			.line{
				width:90%;
				margin:0 auto;
				border:1px solid #e3e3e3;
			}
			.button{
				width:r(365px);
				height:r(85px);
				background-color:#cc3333;
				border-radius:5px;
				text-align:center;
				line-height:r(85px);
				color:#fff;
				font-size:r(30px);
				display:block;
				margin:0 auto;
				margin-top:r(20px);
			}
		}
	}
	.mask_s{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: none;
		.ms_content{
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: rgba(40,40,40,0.7);
			transform: translate(-50%,-50%);
			width:r(250px);
			height:r(185px);
			border-radius:15px;
			i{
				font-size:r(100px);
				color:#fff;
				text-align:center;
				display:block;
				margin-top:r(10px);
			}
			p{
				font-size:14px;
				text-align:center;
				color:#fff;
				margin-top:r(10px);
			}
		}
	}
	.mask_us{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: none;
		.mus_content{
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: rgba(40,40,40,0.7);
			transform: translate(-50%,-50%);
			width:r(250px);
			height:r(185px);
			border-radius:15px;
			i{
				font-size:r(100px);
				color:#fff;
				text-align:center;
				display:block;
				margin-top:r(10px);
			}
			p{
				font-size:14px;
				text-align:center;
				color:#fff;
				margin-top:r(10px);
			}
		}
	}
}
